body {
  overflow: overlay;
}

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

*::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}

.menu-sticky {
  @apply drop-shadow-md backdrop-blur-lg;
}

.toc-list-item > .toc-list {
  @apply my-3 ml-3 space-y-1 border-l pl-2;
}

.pattern-header-text {
  text-shadow: 2px 2px 10px #000;
}

.is-active-link {
  @apply rounded bg-gray-100 dark:bg-slate-600;
}

.moment-content {
  .tag {
    &::before {
      content: "#";
    }
    @apply rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100;
  }
}

.markdown-body {
  background-color: transparent !important;

  line-height: 1.75;

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    border: none !important;
  }

  pre {
    padding: 0 !important;

    code {
      border: 1px solid #fbf6f6;
    }
  }

  p > img {
    border-radius: 0.4rem;
    overflow: hidden;
    @apply shadow;
  }

  :not(pre) > code {
    background-color: #afb8c133;
  }
}

.tailwind-typography {
  @apply prose prose-base mt-4 dark:prose-invert prose-pre:p-0;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E")
    right 0.3em center no-repeat;
  align-items: center;
  padding-right: 1.85em;
  display: inline-flex;
}
